const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const devConfig = {
    mode: 'development',
    devServer: {
        static: './dist',
    },
}

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [new HtmlWebpackPlugin({
        template: './public/index.html',
    })],
    module: {
        rules: [
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            ['@babel/preset-env', {
                                "targets": {
                                    "edge": "17",
                                    "firefox": "60",
                                    "chrome": "67",
                                    "safari": "11.1"
                                },
                                // "useBuiltIns": "usage",
                                // "corejs": "3.6.5"
                            }]
                        ],
                        plugins: ["@babel/plugin-syntax-jsx", "@babel/plugin-transform-react-jsx"]
                    }
                }
            }
        ],
    },
    ...devConfig,
};